<template>
  <van-overlay 
    v-model:show="showPictrue" 
    :close-on-click-overlay="false">
    <div class="content">
      <div class="close">
        <van-icon name="close" color="#fff" size="35" @click="emit('update:show', false)" />
      </div>
      <div class="pictrue" ref="pictrue">
        <van-image
          width="100%"
          :src="require('@/assets/lbxx.png')"
        />
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import hammerjs from 'hammerjs'
import { defineEmits } from 'vue'

const props = defineProps({
  show: Boolean
})
const emit = defineEmits(['update:show'])
const showPictrue = computed(() => props.show)

const pictrue = ref(null)
const hammer = ref(null)
const scaleIndex = ref(1)
const scaleCount = ref()
watch(pictrue, () => {
  if(hammer.value){ return }
  hammer.value = new hammerjs(pictrue.value)

  // 启用pinch手势
  hammer.value.get('pinch').set({ enable: true })
  let x = 0
  let y = 0

  // 监听pinch手势的不同事件，用于实现缩放功能
  hammer.value.on("pinchmove pinchstart pinchin pinchout", e => {
    if (e.type == "pinchstart") {
      scaleIndex.value = scaleCount.value || 1 // 记录当前的缩放比例
    }
    scaleCount.value = scaleIndex.value * e.scale // 计算新的缩放比例
    pictrue.value.style.transform = "scale(" + (scaleIndex.value * e.scale) + ")" // 应用缩放效果
  })

  // 监听doubletap手势，用于双击重置缩放和位置
  hammer.value.on('doubletap', () => {
    x = 0
    y = 0
    if(!scaleCount.value || scaleCount.value == 1){
      scaleCount.value = 2 // 重置缩放比例为1.5
    } else if(scaleCount.value < 1 || scaleCount.value > 1){
      scaleCount.value = 1 // 重置缩放比例为1
    }
    pictrue.value.style.transition = 'all .4s'
    pictrue.value.style.transform = `translateX(0px) translateY(0px) scale(${scaleCount.value})` // 重置位置和缩放效果
    setTimeout(() => {
      pictrue.value.style.transition = 'none'
    }, 400)
  })

  // 监听pan手势，用于实现拖动功能
  hammer.value.on('panright panleft panup pandown', (e) => {
    pictrue.value.style.transform = "translateX(" + (e.deltaX + x) + "px)" + "translateY(" + (e.deltaY + y) + "px)" + "scale(" + (scaleCount.value * e.scale) + ")" // 应用拖动和缩放效果
  })

  // 监听panend手势，用于记录拖动的偏移量，以便在下一次拖动时保持连续性
  hammer.value.on('panend', (e) => {
    x = e.deltaX + x // 记录水平方向上的偏移量
    y = e.deltaY + y // 记录垂直方向上的偏移量
  })
})
</script>

<style lang="scss" scoped>
.content{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  .close{
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 999;
  }
  .pictrue{
    position: relative;
    transition: all .4s;
  }
}
</style>
